{% extends 'subpage/reportbase.html' %}
{% block thirdline_name %}
    <strong class="third-name-text"
            style="float: left;position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;font-weight: 700;"></strong>
{% endblock %}
{% block forthline_name %}
    <strong class="forth-name-text"
            style="float: left;position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;font-weight: 700;"></strong>
{% endblock %}
{% block thirdline_table %}
    <table class="table table-bordered table-third"
           style="border: 1px solid #ddd;width: 100%;max-width: 100%;margin-bottom: 20px; border-spacing: 0;border-collapse: collapse;">
    </table>
{% endblock %}
{% block send_email %}
    <span class="pull-right send-email-tab" style="float: right!important;"></span>
{% endblock %}
{% block second_items_block %}
    <div class="second-childs" style="margin-top: 40px;">
    </div>
{% endblock %}
{% block styles %}
    <style>
        @font-face {
            font-family: 'iconfont';  /* project id 599806 */
            src: url('//at.alicdn.com/t/font_599806_v9odscqj8ni2j4i.eot');
            src: url('//at.alicdn.com/t/font_599806_v9odscqj8ni2j4i.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_599806_v9odscqj8ni2j4i.woff') format('woff'),
            url('//at.alicdn.com/t/font_599806_v9odscqj8ni2j4i.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_599806_v9odscqj8ni2j4i.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
{% endblock %}
{% block bot_box_block %}
    <div class="canvasImg-lists" style="display: none">
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
        <div class="canvasimgBox" style="padding:0 20px"></div>
    </div>
{% endblock %}
{% block js_block %}
    <script>
        $(function () {
            var emailObj = {};
            ajaxRequest("GET", GLOBAL_VARIABLE.BASE_URL + "/dutyInfo", {
                "dutyId": GetQueryString("dutyId"),
                "level": 3
            }, function (data) {
                if (data.code === 0) {
                    var titleStr = '<h3 style="color:#0ec9cb;text-align:center;font-size:30px;">' + data.data.dutyTime + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三线日报统计报告</h3>';
                    $(".title-text").html(titleStr);
                    $(".send-email-tab").html('<a href="javascript:;" class="report-entrance send_email" style="margin-right: 36px;text-decoration:none;"></a>');
                    $(".third-name-text").html(data.data.onDutyThirdName);
                    $(".forth-name-text").html(data.data.onDutyForthName);
                    $(".data-timestamp-area").html('<em>'+new Date().Format("yyyy/MM/dd hh:mm:ss")+'</em><a class="iconfont icon return-view" style="font-size:20px;padding-left:20px;text-decoration:none;font-weight:100;" href="javascript:;">返回</a>');
                    loadPtable(data.data.dataList);
                    loadSecondlist(data.data.secondList);
                    emailObj.emailTitle = data.data.dutyTime + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三线日报统计报告';
                }
            }, function (ero) {
                $.myAlert({title: " 出错提示", message: ero.errormessage});
            });

            //发送邮件
            $(".main-box").on('click', '.send_email', function () {
                $.ajax({
                    type: "POST",
                    url: GLOBAL_VARIABLE.BASE_URL + "/sendEmail",
                    contentType: 'application/json',
                    data: JSON.stringify(emailObj),
                    success: function (data) {
                        if (data.code === 0) {
                            $.myAlert({title: "友情提示", message: "邮件发送任务已创建！"});
                        } else if (data.code === 1) {
                            $.myAlert({title: "友情提示", message: data.errmessage});
                        }
                    },
                    error: function () {
                        $.myAlert({title: "出错提示", message: "请求失败！"});
                    }
                });
            });

            function loadPtable(list) {
                var str = "<thead><tr style=\"background-color: #acacac;\"><td style=\"border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;background-color: #0cf4fc;\">故障时间</td>" +
                    "<td style=\"border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;background-color: #0cf4fc;\">故障内容</td>" +
                    "<td style=\"border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;background-color: #0cf4fc;\">故障说明</td></tr></thead><tbody>";
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    str += '<tr><td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;">' + item.brokeTime + '</td>' +
                        '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;">' + item.brokeContent + '</td>' +
                        '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;">' + item.brokeDeal + '</td></tr>';
                }
                str += '</tbody>';
                $(".table-third").html(str);
            }

            function loadSecondlist(list_d) {
                var totalStr = '', list = [];
                console.log(list_d);
                list = sortSecondlist(list_d);
                for (var i = 0; i < list.length; i++) {
                    var item = list[i], departN = list[i].departName, tableStr = '', richStr = '';
                    totalStr += '<div class="second-item" style="margin-bottom: 30px;"><h2 stylle="position: relative;padding-bottom:10px;"><b style="font-weight: 700;color:#0ec9cb;">' + item.departAlias + '</b>' +
                        '<div style="width:100%;height:2px;background:linear-gradient(to right, #000000, #333333 10%, #ffffaa)"></div></h2>';
                    switch (departN) {
                        case 'OP'://系统运维部
                            if (item.dutyId) {//存在日报
                                if (item.tableList.length > 0) {//有表格数据
                                    tableStr += '<div class="duty-content" style="padding-top:10px;"><div class="table-container" style="margin-bottom: 34px;"><table class="table table-bordered table-second"  style="border: 1px solid #ddd;width: 100%;max-width: 100%;margin-bottom: 20px;border-spacing: 0;border-collapse: collapse;">' +
                                        '<thead>' +
                                        '<tr style="background-color: #acacac;">' +
                                        '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;background-color: #0cf4fc;"> 机房位置 </td>' +
                                        '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;background-color: #0cf4fc;"> 带宽(Mb/s)</td>' +
                                        '</tr>' +
                                        '</thead>' +
                                        '<tbody>';
                                    for (var j = 0; j < item.tableList.length; j++) {
                                        var item2 = item.tableList;
                                        tableStr += '<tr><td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;">' + item2[j].idc + '</td>';
                                        tableStr += '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;">' + item2[j].bw + '</td></tr>';
                                    }
                                    tableStr += '</tbody></table></div>';
                                }
                                richStr = '<div class="richtext-container">' + item.richText + '</div></div>';
                                totalStr += tableStr + richStr + '</div>';
                            } else {//不存在日报
                                totalStr += '<div class="duty-content">暂无日报记录</div></div>';
                            }
                            break;
                        case 'SEC':
                            if (item.dutyId) {//存在日报
                                if (item.tableList.length > 0) {//有表格数据
                                    tableStr += '<div class="duty-content" style="padding-top:10px;"><div class="table-container" style="margin-bottom: 34px;"><table class="table table-bordered table-second" style="border: 1px solid #ddd;width: 100%;max-width: 100%;margin-bottom: 20px;;border-spacing: 0;border-collapse: collapse;">' +
                                        '<thead>' +
                                        '<tr style="background-color: #acacac;">' +
                                        '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;background-color: #0cf4fc;"> 事件 </td>' +
                                        '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;background-color: #0cf4fc;"> 类型 </td>' +
                                        '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;background-color: #0cf4fc;"> 时间 </td>' +
                                        '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;background-color: #0cf4fc;">说明</td>' +
                                        '</tr>' +
                                        '</thead>' +
                                        '<tbody> ';
                                    for (var j = 0; j < item.tableList.length; j++) {
                                        var item2 = item.tableList;
                                        tableStr += '<tr><td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;">' + item2[j].event + '</td>';
                                        tableStr += '<td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;">' + item2[j].type + '</td><td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;">' + item2[j].time + '</td><td style="border: 1px solid #ddd;padding: 8px;line-height: 1.42857143;vertical-align: top;">' + item2[j].content + '</td></tr>';
                                    }
                                    tableStr += '</tbody></table></div>';
                                }
                                richStr = '<div class="richtext-container">' + item.richText + '</div></div>';
                                totalStr += tableStr + richStr + '</div>';
                            } else {//不存在日报
                                totalStr += '<div class="duty-content">暂无日报记录</div></div>';
                            }
                            break;
                        default://其他部门-》无表格数据
                            if (item.dutyId) {//有日报
                                richStr = '<div class="duty-content" style="padding-top:10px;"><div class="richtext-container">' + item.richText + '</div></div>';
                                totalStr += tableStr + richStr + '</div>';
                            } else {//无日报
                                totalStr += '<div class="duty-content">暂无日报记录</div></div>';
                            }
                            break;
                    }

                }
                $(".second-childs").html(totalStr);
                //将富文本编辑器的内容渲染到canvas->img中
                loadCanvasImg(list);

            }

            //对list进行排序
            function sortSecondlist(list) {
                var arr = [], first_group = '', second_group = '', other_group = [], new_arr = [];
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    if (item.departName !== 'SEC' && item.departName !== 'OP') {
                        other_group.push(item);
                    } else {//系统运维或者网络安全
                        if (item.departName === 'OP') {
                            first_group = item;
                        } else if (item.departName === 'SEC') {
                            second_group = item;
                        }
                    }
                }
                arr.push(first_group);
                arr.push(second_group);
                new_arr = arr.concat(other_group);
                return new_arr;
            }

            function loadCanvasImg(list) {
                loopCanv(0);
                function loopCanv(j) {
                    if (j === list.length) {
                        var result = concatCopyHtml();
                        emailObj.emailTemp = result.emailTemp;
                        emailObj.imgList = result.imgList;
                        $(".send_email").html("发送邮件");
                    }
                    if (j >= list.length) {
                        return
                    }
                    var dutyId = list[j].dutyId;
                    if ($(".second-childs .second-item").eq(j).find(".richtext-container").hasClass("richtext-container") && dutyId) {
                        convert2canvas($(".second-childs .second-item").eq(j).find(".richtext-container").eq(0), $(".canvasimgBox").eq(j), dutyId).then(function () {
                            loopCanv(j + 1);
                        });
                    } else {
                        loopCanv(j + 1);
                    }
                }

            }

            function concatCopyHtml() {
                var str = "<html lang='en'><head><meta charset=\"UTF-8\"></head><body>";
                str += '<div class=\'main-box\' style=\'padding:0 20px;\'>' +
                    '<div style=\"padding: 20px 0;margin-left:-8px;\"><div style="float:left;margin-top:16px;"><b><span>【友情提示】以下日报部分为图片，详情请点击</span></b><a href=\"' + document.referrer + '\" style=\"color:#310df0;font-weight:800;text-decoration:none;margin-left:8px;\">Me</a></div><p style="margin-left:20px;display:inline-block;"><b>数据版本：</b><span>' + $(".data-timestamp-area em").html() + '</span></p></div>' +
                    '<h3 style="color:#0ec9cb;font-size:30px;text-align:center">' + $(".main-box .title-text>h3").html() + '</h3>' +
                    '<div class="top-box clearfix margin-none padding-none" style="margin: 0;padding: 0">' +
                    '<div class="top-name" style="overflow: hidden;clear:both;padding:20px 0;">' + $(".top-name").html() + '</div>' +
                    '<div class="show-input-items clearfix" style="margin-bottom:30px;">' + $(".show-input-items").html();
                for (var i = 0; i < 12; i++) {
                    str += '<div class="second-item" style="margin-bottom: 30px;">' +
                        '<h2 style="padding-bottom: 5px;position: relative;color:#0ec9cb;">' + $(".second-item").eq(i).find("h2").html() + '</h2>' +
                        '<div class="duty-content">';
                    if ($(".second-item").eq(i).find(".duty-content").html() !== '暂无日报记录') {
                        if ($(".second-item").eq(i).find(".table-container").hasClass("table-container")) {
                            str += '<div class="table-container" style="margin-bottom: 34px;">' + $(".second-item").eq(i).find(".table-container").html() + '</div>';
                        }
                        str += '<div class="richtext-container">' + $(".canvasImg-lists .canvasimgBox").eq(i).html() + '</div>';
                    } else {
                        str += $(".duty-content").eq(i).html();
                    }
                    str += '</div></div>';
                }
                str += "</div></div>" +
                    "</div></div></body></html>";
                return {
                    "emailTemp": str,
                    "imgList": [],
                    "emailTitle": $(".main-box .pull-left>.title-text h3").html()
                }
            }

            $(document).on("click", ".return-view", function () {
                window.history.go(-1);
            });

        });
    </script>
{% endblock %}